import { Card, Form, Input, Select, Space, Button } from "antd";
import { User } from "../../../Types/User";
import { cleanObject } from "../../../utils/cleanObject";

type onSearchProps = User;

interface SearchFormProps {
    onSearch: (values: onSearchProps) => void;
    onReset: () => void;
}
export default function SearchForm(props: SearchFormProps) {
    function onFinish(values: onSearchProps) {
        props.onSearch(cleanObject(values));
    }
    return (
        <Card bordered={false}>
            <Form layout="inline" onFinish={onFinish} onReset={props.onReset}>
                <Space
                    style={{
                        justifyContent: "space-between",
                        display: "flex",
                        width: "100%",
                        flexWrap: "wrap",
                    }}
                >
                    <Space wrap>
                        <Form.Item name={"name"}>
                            <Input placeholder="请输入用户名" allowClear />
                        </Form.Item>
                        <Form.Item name={"phone"}>
                            <Input placeholder="请输入手机号" allowClear />
                        </Form.Item>
                        <Form.Item name={"email"}>
                            <Input placeholder="请输入邮箱" allowClear />
                        </Form.Item>
                        <Form.Item name={"status"}>
                            <Select placeholder="请选择状态" allowClear>
                                <Select.Option value="1">启用</Select.Option>
                                <Select.Option value="2">禁用</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item name={"role"}>
                            <Select placeholder="请选择角色" allowClear>
                                <Select.Option value="1">管理员</Select.Option>
                                <Select.Option value="2">
                                    普通用户
                                </Select.Option>
                            </Select>
                        </Form.Item>
                    </Space>
                    <Space align="end">
                        <Space>
                            <Button type="primary" htmlType="submit">
                                搜索
                            </Button>
                            <Button htmlType="reset">重置</Button>
                        </Space>
                    </Space>
                </Space>
            </Form>
        </Card>
    );
}
